<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-13 15:57:58
 * @LastEditTime: 2019-08-14 17:53:26
 * @LastEditors: Please set LastEditors
 -->
<template>
<div class="index">
    <h5 class='center'>{{$t("message.Hello")}},{{$t('message.welcome')}}</h5>
        <van-cell-group>
        <van-field
            border
            size="large"
            v-model="user"
            :label="$t('message.name')"
            :placeholder="$t('message.searchname')"
            type="tel"
            clearable
            label-width="85"
            label-align="center"
            @keyup.enter="Search()"
        />
    </van-cell-group>
    <van-row type="flex" justify="center" class="cel_height">
        <van-col span="8">
            <van-button @click="Search()"
            size="large" 
            type="primary" 
            plain
            :loading="loading"
            loading-text="加载中..."
            >{{$t('message.search')}}</van-button>
        </van-col>
    </van-row>
    <div v-show="finish">
        <van-row >
            <van-col span="6" offset="2" class="f14 black">{{$t('message.create')}}:</van-col>
            <van-col span="15" offset="1" class="f14 black">
                {{info.created_at}}
            </van-col>
        </van-row>
        <van-row >
            <van-col span="6" offset="2" class="f14 black">{{$t('message.truename')}}:</van-col>
            <van-col span="15" offset="1" class="f14 black">
                {{info.name}}
            </van-col>
        </van-row>
        <van-row>
            <van-col span="6" offset="2" class="f14 black">{{$t('message.avatar')}}:</van-col>
            <van-col span="5" offset="1">
                <van-image
                width="100px"
                height="100px"
                fit="contain"
                :src="info.avatar_url"
                />
            </van-col>
        </van-row>
        <van-row>
            <van-col span="6" offset="2" class="f14 black">{{$t('message.bio')}}:</van-col>
            <van-col span="15" offset="1" class="f14 black">
                {{info.bio}}
            </van-col>
        </van-row>
        <van-row>
            <van-col span="6" offset="2" class="f14 black">{{$t('message.location')}}:</van-col>
            <van-col span="15" offset="1" class="f14 black">
                {{info.location}}
            </van-col>
        </van-row>
        <van-row>
            <van-col span="6" offset="2" class="f14 black">{{$t('message.look')}}:</van-col>
            <van-col span="15" offset="1" class="f14 black">
                <van-button type="info" size="small" plain :url="info.html_url">{{$t('message.enter')}}</van-button>
            </van-col>
        </van-row>
        <van-row>
            <van-col span="6" offset="2" class="f14 black">{{$t('message.like')}}:</van-col>
            <van-col span="2" offset="1" class="flex">
                <van-tag type="danger">{{info.followers}}</van-tag>
            </van-col>
            <van-col span="6" offset="1" class="f14 black">
                <van-button type="danger" size="small" @click="Look(info.followers_url)" :loading="view" plain>{{$t('message.view')}}</van-button>
            </van-col>
        </van-row>
        <van-list
        v-model="loading_"
        :finished="finished"
        finished-text="没有更多了"
        @load="Look"
        >
            <van-grid :gutter="10" v-show="list.length">
                <van-grid-item
                    v-for="(item,index) in list"
                    :key="index"
                    icon="photo-o"
                    text="头像"
                    @click.stop="ToHome(item)"
                >
                <van-image 
                :src="item.avatar_url"
                width="50px"
                height="50px"
                fit="cover" 
                />
                <p class="f12 black center van-ellipsis">{{item.login}}</p>
                </van-grid-item>
            </van-grid>
        </van-list>
    </div>
    
</div>
</template>
<script>
import api from "@/api/index";
import axios from "axios";
import { 
    Button,
    Field,
    Cell, 
    CellGroup,
    NavBar,
    Toast,
    Divider,
    Row,
    Col,
    Panel,
    Dialog,
    Image,
    Tag,
    Grid, 
    GridItem,
    List
} from 'vant';
export default {
    name:"Index",
    components:{
        [Button.name]:Button,
        [Field.name]:Field,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [NavBar.name]:NavBar,
        [Divider.name]:Divider,
        [Row.name]:Row,
        [Col.name]:Col,
        [Panel.name]:Panel,
        [Image.name]:Image,
        [Tag.name]:Tag,
        [Grid.name]:Grid,
        [GridItem.name]:GridItem,
        [List.name]:List
    },
    created(){
        console.log('api',api);
    },
    data(){
        return{
            psw:"",
            user:"",
            info:{},
            finish:false,
            loading:false,
            view:false,
            list:[],
            loading_:false,
            page:1,
            finished:false,
        }
    },
    methods:{
        ToHome(item){
            window.location.href = item.html_url;
        },
        Search(){
            if(this.user){
                this.getInfo()
                this.finish = false;
                this.loading = true;
                this.view = false;
                this.list = [];
                this.page = 1;
                this.loading_ = false;
                this.finished = false;
            }else{
                Toast(this.$t('message.searchname'));
            }
        },
        Tap(){
            Dialog.confirm({
                title: '标题',
                message: '弹窗内容'
            }).then(() => {
            // on confirm
            }).catch(() => {
            // on cancel
            });
        },
        getInfo(){
            api.getInfo(
                this.user
            ).then(res=>{
                console.log('res',res);
                this.info = res;
                this.loading = false;
                this.finish = true;
            }).catch(err=>{
                console.log('err',err);
                Toast(err);
                this.loading = false;
            })
        },
        Look(url){
            this.view = true;
            axios.get(url,{page:this.page}).then(res=>{
               console.log('res',res);
               this.list =this.list.concat(res.data);
               this.view = false;
               this.page++;
                // 加载状态结束
                this.loading_ = false;

                // 数据全部加载完成
                if (this.list.length >= this.info.followers) {
                    this.finished = true;
                }

            })
        },
        onClickLeft() {
            Toast('返回');
        },

        onClickRight() {
            Toast('按钮');
        }
    }
}
</script>
<style lang="less">
.van-ellipsis{
    width:60px;
}
.view_item{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.name{
    font-size: 12px;
    color:#666;
    text-align: center;
}
.flex{
    display: flex;
    height:30px;
    justify-content: center;
    align-items: center;
}
.van-row{
    margin: 10px auto;
}
.f14{font-size: 14px;}
.f12{font-size: 12px;}
.center{text-align: center}
.black{color:rgb(95, 79, 79);}
.index{
    height:100vh;
    width:100vw;
    overflow: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.center{
    text-align: center;
}
h5{
    height:50px;
    line-height: 50px;
    margin-top: 50px;
}
.cel_height{
    height:40px;
    margin-top: 20px;
    button{
        width:100%;
        height:100%;
        line-height: 40px;
        font-size: 14px;
    }
}
</style>